<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!--            <input type="checkbox" :checked="isAll" @change="changeAll">-->

            <input type="checkbox" v-model="isAll">
        </label>
        <span>
            <span>已完成{{ doneTotal }}</span> /全部 {{ total }}
        </span>
        <button class="btn btn-danger" @click="clearDoneTask">清除已经完成任务</button>
    </div>

</template>

<script>
    export default {
        name: 'MyFooter',
        props: {
            todoList: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        computed: {
            total() {
                return this.todoList.length
            },
            doneTotal() {
                const x = this.todoList.reduce((pre, current) => {
                    return pre + (current.done ? 1 : 0);
                }, 0)
                console.log(x);
                return x;
            },
            isAll: {
                get() {
                    return this.doneTotal === this.todoList.length && this.total > 0;
                },
                set(value) {
                    this.$emit('checkAllTodos', value);
                }
            }

        },
        methods: {
            changeAll(e) {
                this.$emit('checkAllTodos', e.target.checked);
            },
            clearDoneTask() {
                console.log('clearDoneTask')
                this.$emit('clearAllTodo');
            }
        },
        watch: {}

    }
</script>
<style scoped>

</style>